<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div居中的各种方法</title>
    <style type="text/css">

        /*!*水平垂直居中一*!
        div{
            position: absolute;
            width:500px;
            height: 300px;
            top: 50%;
            left: 50%;
            margin: -150px 0 0 -250px;
            background-color: pink;
        }*/

        /*水平垂直居中二*/
        div{
            position: absolute;
            width:500px;
            height: 300px;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: pink;
            display: in;
        }

        /*绝对定位的div居中*/
       /* div{
            position: absolute;
            width: 300px;
            height: 300px;
            margin: auto;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: pink
        }*/

       /* 水平居中*/
       /* div{
            !* border: 1px solid grey;
           width: 200px;
           margin: 0 auto;*!
        }*/
    </style>
</head>
<body>
    <div id="container">
        <div></div>
    </div>
</body>
</html>